<template>
  <div class="ChargeDischargeEcharts-box">
    <div id="customerChart"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties
onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(
    document.getElementById("customerChart")
  )
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(document.getElementById("customerChart"))

  let xAxisData = [
    "03:00",
    "03:00",
    "03:00",
    "03:00",
    "03:00",
    "03:00",
    "03:00"
  ]
  let seriesData = [100, 200, 300, 220, 445, 655, 445]

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: "15%",
      left: "0%",
      right: "3%",
      bottom: "5%",
      containLabel: true
    },
    xAxis: {
      boundaryGap: true,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: "rgba(117, 168, 202, 0.4)"
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#fff"
      }
    },
    yAxis: [
      {
        name: "单位: MW",
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#c1cdd1",
            type: "dashed"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        nameTextStyle: {
          color: "#fff",
          padding: [0, 0, -10, 0],
          fontSize: 12
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        type: "line",
        symbol: "circle", //设定为实心点
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              //线的颜色
              color: `#76b3ef`,
              width: 1.5
            },
            areaStyle: {
              //新版渐变色实现
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#2f80c7"
                  },
                  {
                    offset: 1,
                    color: "#97aec8"
                  }
                ]
              }
            }
          }
        },
        data: seriesData
      }
    ]
  }

  // 这个方法的目的是为了跟随盒子大小改变而改变
  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}
</script>
<style scoped lang="less">
.ChargeDischargeEcharts-box {
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  // background-color: pink;
  box-sizing: border-box;
  #customerChart {
    width: 100%;
    height: 100%;
  }
}
</style>
